<template>
	<view class="content">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}"><!-- :style="{top: '-' + titleTop + 'px'}"> -->
			<image src="/static/my/headerBg.png" class="headerBg" mode=""></image>
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
			<view class="userCard">
				<view class="userInfo">
					<image :src="userinfo.avatar|completeUrl" class="userImg" mode="aspectFill"></image>
					<view class="userInfoLay">
						<view class="lable">
							昵称/NANE
						</view>
						<view class="name">
							{{userinfo.nickname||''}}
						</view>
						<view class="qqNumber">
							{{userinfo.qq||''}}
						</view>
					</view>
				</view>
				<view class="consumptionNumber">

					<image src="/static/my/consumptionIcon.png" class="consumptionIcon" mode="widthFix"></image>

					<view class="priceTxt ">
						<text class="unit">￥</text>
						<view class="number">
							{{lookType?userInfoData.consumption_total||'0':"**"}}
						</view>
						<!-- eye -->
						<view class="" @click="lookTypeFn">

							<uni-icons class="eyeIcon" :type="lookType?'eye-filled':'eye-slash-filled'" color="#BDBDBD"
								size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contentWrap"
			:style="{paddingTop:( (statusBarHeight + titleTop)<=50?'86':(statusBarHeight + titleTop) )+ 'px'}">
			<view class="cardLay" v-if="consumptionsList.length === 0 && !loading">
				<noData></noData>

			</view>
			<template v-else>
				<view class="cardLay">

					<view class="cardItem" v-for="(item,index) in consumptionsList" :key="index">
						<cardBag :cardData="item" :urlKey="'image_url'">
							<template #option v-if="false">
								<view class="optionLay" @click="optionFN(item)">
									<uni-icons v-if="item.action" type="checkbox-filled" color="#fff"
										size="14"></uni-icons>
									<uni-icons v-else type="circle" color="#fff" size="14"></uni-icons>
								</view>
							</template>
							<template #infoMore>
								<view class="infoLay">
									<view class="consumptionInfo">
										<view class="lable">
											<image src="/static/priceIcon.png" class="priceIcon" mode="widthFix"></image>累消
										</view>
										<view class="value">
											<text class="unit">￥</text>
{{item.actual_amount}}
										</view>
									</view>
									<view class="shopInfo" v-if="false">
										<image class="logo" src="" mode="aspectFit"></image>
										<view class="title">
											<view>鬼灭扭蛋馆鬼灭扭蛋馆鬼灭扭蛋馆</view>
											<uni-icons type="right" color="#5A5A5A" size="8"></uni-icons>
										</view>
									</view>
								</view>
							</template>
						</cardBag>
					</view>
				</view>
				<!-- 使用uni-load-more组件显示加载状态 -->
				<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
					iconType="auto"></uni-load-more>
				<!-- <view class="pictureItem">
				</view> -->
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '累消明细',
				list: [{
					level: 0,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 1,
				}, {
					level: 1,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 2,
				}, {
					level: 2,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 3,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 4,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 5,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 6,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 7,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 4,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 5,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 6,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 7,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 4,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 5,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 6,
				}, {
					level: 4,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 7,
				}, ],
				userinfo: {},
				page: 1, // 当前页码
				page_size: 12, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				consumptionsList: [],
				lookType: false,
			};
		},
		onLoad() {
			this.resetList();
		},
		onShow() {
			this.lookType = uni.getStorageSync('lookType') || false;
			this.userinfo = uni.getStorageSync('userInfo') || {};
		},
		// 触底加载更多
		onReachBottom() {
			// 如果没有更多数据或正在加载，则返回
			if (this.noMoreData || this.loading) return

			// 页码增加并获取下一页数据
			this.page++
			this.getConsumptionsList()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.resetList();
			// 设置超时自动停止刷新（防止接口失败导致一直刷新）
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 5000);
		},
		methods: {
			lookTypeFn() {
				this.lookType = !this.lookType;
				uni.setStorageSync('lookType', this.lookType);
			},
			optionFN(item) {
				item.action = !item.action
			}, // 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1;
				this.noMoreData = false;
				this.getConsumptionsList()
			},
			getConsumptionsList() {

				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/users/consumptions', {
						page: this.page,
						page_size: this.page_size,
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.consumptionsList = data.list || []
							} else {
								// 后续页，合并数据
								this.consumptionsList = [...this.consumptionsList, ...(data.list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.consumptionsList.length >= this.total;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},

		}
	}
</script>
<style>
	page {
		background-color: #FFEFEF;
	}
</style>
<style lang="scss" scoped>
	.mainHeader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		width: 750upx;
		// 这两条很重要，遮盖不同机型头部安全距离与头部自适应高度
		height: 386upx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #FFEFEF 100%);

		.headerBg {
			@include setwh(750upx, 386upx);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.userCard {
			position: relative;
			padding: 0 60upx 50upx 34upx;
			@include flexLayout(center);

			.userInfo {
				@include flexLayout(center);

				.userImg {
					@include setwh(78upx, 78upx);
					background-color: #F3F3F3;
					border-radius: 50%;
					margin-right: 10upx;
				}

				.userInfoLay {

					.lable {
						font-family: Huiwen, Huiwen;
						font-weight: normal;
						font-size: 10rpx;
						color: #020202;
						line-height: 12rpx;
						margin-bottom: 2upx;
						position: relative;

						&::after,
						&:before {
							content: '';
							position: absolute;
							top: 0;
						}

						&::after {
							width: 140rpx;
							height: 4rpx;
							background: #424242;
							right: -10upx;
						}

						&:before {
							width: 116rpx;
							height: 2rpx;
							background: #424242;
							top: 8upx;
							left: 56upx;
						}
					}

					.name {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 24rpx;
						color: #000000;
						line-height: 32rpx;
						margin: 4upx 0 6upx;
					}

					.qqNumber {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: 500;
						font-size: 20rpx;
						color: #A4A4A4;
						line-height: 30rpx;
					}

				}
			}

			.consumptionNumber {
				margin-left: 70upx;
				margin-top: 24upx;
				flex: 1;

				.consumptionIcon {
					@include setwh(252upx, 0);
					margin-bottom: 20upx;
				}

				.priceTxt {
					@include flexLayout(center, flex-end);
					color: #FF7994;
					text-align: right;

					.unit {
						font-size: 32rpx;
					}

					.number {
						font-family: DingTalk, DingTalk;
						font-weight: normal;
						font-size: 48rpx;
						line-height: 57rpx;
						margin-right: 14upx;
					}

					.eyeIcon {
						font-weight: bold;
					}
				}
			}
		}
	}

	.contentWrap {
		margin-top: 22upx;
	padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.cardLay {
			padding: 210upx 18upx 80upx;
			@include flexLayout(center, flex-start);
			flex-wrap: wrap;
			column-gap: 8rpx;
			row-gap: 28upx;
			position: relative;
			z-index: 3;

			::v-deep .nodataLay {
				width: calc(100vw - 20upx);
			}

			::v-deep .cardItem {
				.optionLay {
					position: absolute;
					top: 0;
					left: 0;
					width: 40rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, 0.43);
					border-radius: 0rpx 0rpx 10rpx 0rpx;

					.uni-icons {
						@include positionCenter;
						line-height: 1;
					}
				}

				.infoLay {

					.consumptionInfo {
						@include flexLayout(center, space-between);
						padding: 10upx 26upx 10upx 6upx;

						.lable {
							@include flexLayout(center);
							font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
							font-weight: bold;
							font-size: 14rpx;
							color: #FF7994;
							line-height: 32rpx;
							.priceIcon{
								@include setwh(22upx,0);
								margin-right: 10upx;
							}
						}

						.value {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: bold;
							font-size: 24rpx;
							color: #FF7994;
							line-height: 32rpx;

							.unit {
								font-size: 20rpx;
							}
						}
					}

					.shopInfo {
						width: 100%;
						@include flexLayout(center, space-between);
						background: #FFF5F5;
						border-radius: 8rpx;
						padding: 4upx 10upx;

						.logo {
							@include setwh(28upx, 28upx);
							margin-right: 12upx;
							background-color: #666;
							border-radius: 50%;
						}

						.title {
							@include flexLayout(center, space-between);
							font-family: STHeitiSC, STHeitiSC;
							font-weight: 500;
							font-size: 16rpx;
							color: #5A5A5A;
							width: calc(100% - 40upx);

							view {
								width: 122upx;
								@include lineOver;
							}
						}
					}
				}
			}
		}

	}
</style>